/** 软件地图部件
 * Author:      huoxj 
 * CreateTime:  2023/2/5 20:36:33 
 * LastEditor:  huoxj 
 * ModifyTime:  2023/12/5 19:32:17 
 * Description: 
*/ 
<template>

<div class="map">
  <div class="map1"><img :src="lbxImg"/></div>
  <div class="map2"><img :src="jtImg"/></div>
  <div class="map3"><img :src="mapImg"/></div>
  <div class="map4" ref="echartRef" ></div>
</div>
</template>

<script lang="ts" setup>
import {
  ref,
  Ref,
  reactive,
  onMounted,onUnmounted,
  watchEffect,
} from 'vue';
import {
  useECharts
} from '/@/hooks/web/useECharts';
import china from "/@/assets/data/china.json";

import lbxImg from "/@/assets/images/lbx.png";
import jtImg from "/@/assets/images/jt.png";
import mapImg from "/@/assets/images/map.png";
import {defHttp} from "/@/utils/http/axios";

const props = defineProps(['width', 'height']);

const echartRef = ref < HTMLDivElement | null > (null);

const {
  setOptions,
  echarts
} = useECharts(echartRef as Ref < HTMLDivElement > , 'dark');

const COLORS = ['rgb(127,255,170,0.5),rgb(186,85,211,0.5)','rgb(255,255,0,0.5)','rgb(238,232,170,0.5)',
  'rgb(148,0,211,0.5)','rgb(0,206,209,0.5)','rgb(0,250,154,0.5)',
  'rgb(50,205,50,0.5)','rgb(173,255,47,0.5)','rgb(255,215,0,0.5)'];
let regions = [{
    name: '北京市',
    itemStyle: {
      areaColor: 'rgb(186,85,211,0.5)',
      opacity: 1,
    },
  },
  {
    name: '天津市',
    itemStyle: {
      areaColor: 'rgb(255,255,0,0.5)',
      opacity: 1,
    },
  },
  {
    name: '上海市',
    itemStyle: {
      areaColor: 'rgb(238,232,170,0.5)',
      opacity: 1,
    },
  },
  {
    name: '广东省',
    itemStyle: {
      areaColor: 'rgb(127,255,170,0.5)',
      opacity: 1,
    },
  },
  {
    name: '山西省',
    itemStyle: {
      areaColor: 'rgb(127,255,170,0.5)',
      opacity: 1,
    },
  },  
  {
    name: '海南省',
    itemStyle: {
      areaColor: 'rgb(127,255,170,0.5)',
      opacity: 1,
    },
  },  
];
let scatter = [
  {
    "name": "天津",
    "value": [117.200983, 39.084158,'天津分公司'],
    "symbolSize": 16,
    "itemStyle": {
      "normal": {
        "color": "rgba(255,165,0,0.8)"//橙色
      }
    }
  },
  {
    "name": "北京",
    "value": [116.407526, 39.90403,'研究总院、国际公司、中联公司'],
    "symbolSize": 16,
    "itemStyle": {
      "normal": {
        "color": "rgba(255,0,0,0.8)"//红色
      }
    }
  },
  {
    "name": "深圳",
    "value": [114.057868, 22.543099,'深圳分公司'],
    "symbolSize": 16,
    "itemStyle": {
      "normal": {
        "color": "rgba(135,206,250,0.8)"//浅蓝色
      }
    }
  },
  {
    "name": "湛江",
    "value": [110.359377, 21.270708,'湛江分公司'],
    "symbolSize": 16,
    "itemStyle": {
      "normal": {
        "color": "rgba(0,255,0,0.8)"//绿色
      }
    }
  },
  {
    "name": "上海",
    "value": [121.473701, 31.230416, '上海分公司'],
    "symbolSize": 16,
    "itemStyle": {
      "normal": {
        "color": "rgb(138,43,226,0.8)"
      }
    }
  },
  // {
  //   "name": "广州",
  //   "value": [113.264435, 23.129163, 13],
  //   "symbolSize": 22,
  //   "itemStyle": {
  //     "normal": {
  //       "color": "rgb(0,255,255,0.8)"
  //     }
  //   }
  // },
  {
    "name": "海口",
    "value": [110.199877, 20.00506,'海南分公司'],
    "symbolSize": 16,
    "itemStyle": {
      "normal": {
        "color": "rgb(0,255,255,0.8)"
      }
    }
  },
  {
    "name": "大同",
    "value": [113.35995,40.09282,'中联公司'],
    "symbolSize": 16,
    "itemStyle": {
      "normal": {
        "color": "rgb(0,255,255,0.8)"
      }
    }
  }
];
const option = reactive({
  geo: {
    map: 'china',
    roam: false, //是否允许缩放，拖拽
    zoom: 1.5, //初始化大小
    //缩放大小限制
    scaleLimit: {
      min: 1, //最小
      max: 4, //最大
    },
    //设置中心点
    center: [103.73, 36.03],
    label: {
      emphasis: {
        show: false
      }
    },
    //省份地图添加背景
    regions: regions,
    itemStyle: {
      areaColor: 'rgba(7,21,57,0.4)',
      //color: 'red',
      borderColor: '#0177ff',
      borderWidth: 1,
    },
    //高亮状态
    emphasis: {
      itemStyle: {
        areaColor: 'rgba(0,60,153,0.5)', //鼠标指上市时的颜色
        color: '#ffffff',
      },
    },
  },
  //配置属性
  series: {
    type: 'effectScatter',
    coordinateSystem: 'geo',
    //zlevel: 2,
    data: scatter,
    rippleEffect: {
      brushType: 'stroke'
    },
    label: {
      emphasis: {
        show: true,
        position: 'left',
        formatter: '{b}：{@[2]}'
      },
      fontSize:26,
      color: '#ffffff'
    },
    hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果
    symbolSize: 12,
    showEffectOn: 'render',
    itemStyle: {
      normal: {
        color: '#F70C2B',
        areaColor: 'rgba(0,60,153,0.8)',        
      }
    },

  },
});

let timer;

function loadData(){
  let api = "/j_monitoring/licenseSoftware/readCompanyInfoJson";
  let params = {};
  let options = {isTransformResponse: false};
  defHttp.get({url: api, params}, options)
    .then((res) => {
      if (res.success) {
        let record = JSON.parse(res.result.value)||{};
        let datalist = record.dataList||[];
        regions.splice(0,regions.length);
        scatter.splice(0,scatter.length);
        let proviceObj= {};
        let coordinateXY = [];
        for(let i=0;i<datalist.length;i++){
          let dataItem = datalist[i];
          if(!proviceObj[dataItem.province]){
            regions.push({
              name: dataItem.province,
              itemStyle: {
                areaColor: COLORS[i % COLORS.length],
                opacity: 1,
              },
            });
            proviceObj[dataItem.province] = 1;
          }

          coordinateXY = (dataItem.coordinateXY||'0,0').split(',');
          scatter.push(
            {
              name: dataItem.city,
              value: [Number(coordinateXY[0]), Number(coordinateXY[1]),dataItem.name],
              symbolSize: 16,
              itemStyle: {
                normal: {
                  color: "rgba(255,0,0,0.8)"//橙色
                }
              }
            },
          )
          // {
          //   name: '北京市',
          //   itemStyle: {
          //     areaColor: 'rgb(186,85,211,0.7)',
          //     opacity: 1,
          //   },
          // },
        }
        console.log(regions);
        initCharts();
      } else {
        console.log('接口错误用默认');
      }
    })
}

function initCharts() {  
  setOptions(option,true);
}
function startSetInterval() {
  timer = setInterval(function () {
    loadData();
  }, 12*60*60000);

}

onMounted(()=>{
  echarts.registerMap("china", china);
  loadData();
  //initCharts();
  startSetInterval();
});

onUnmounted(()=>{
    if(timer){
      clearInterval(timer);
    }
  });
</script>

<style lang="less" scoped>
  .map{  width:100%;height:100%;display:flex;align-items:center;justify-content:center; }
  .map4{ width: 100%;height: 100%;   position: absolute;  z-index: 10;}
  .map1,.map2,.map3{
    position: absolute;
    opacity: .5;
  }
  .map1{
    animation: myfirst2 15s infinite linear;
    opacity: .5;
    z-index: 2;}
  .map2{ 
    z-index: 3; opacity: 0.6; animation: myfirst 10s infinite linear;
  }
  .map3{
   z-index: 1;
  }

  @keyframes myfirst2
  {
    from {transform: rotate(0deg);}
    to {transform: rotate(359deg);}
  }

  @keyframes myfirst
  {
    from {transform: rotate(0deg);}
    to {transform: rotate(-359deg);}
  }

</style>
